/*
 * @Title: 
 * @Created by: ycq
 */
<template>
	<view class="">
		<view class="head">
			<view :style="{height:statusBarHeight}" class="uni-status-bar"></view>
			<view class='head-img' @click='back'>
				<image src="/static/fanhui-black.png" mode=""></image>
			</view>
			<text>演艺活动</text>
		</view>
		<view class="like-list">
			<view class="like-area">
				<view class="like-item" v-for='(item,inedx) in likeData' :key='inedx' @click="openDetail">
					<image :src="item.img"  mode="aspectFill"></image>
					<text class="like-name">{{item.name}} <font>(4A)</font></text>
					<text class="like-tip">{{item.tip}}</text>
					<text class="like-des">{{item.des}}</text>
					<text class="like-prize">￥{{item.prize}}</text>
					<view class="place-tip">
						<view class='dot'></view>
						<text>{{item.city}}</text>
					</view>
				</view>
			</view>
		</view>
		<FootMenu navIndex='3'/>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				statusBarHeight:global.statusBarHeight + 'px',
				likeData:[
					{
						name:'海盗窝综艺秀',
						tip:'综艺',
						des:'滑稽小丑和您紧密互动的斗场秀,时尚炫酷，性感火辣...',
						prize:199,
						img:'/static/banner.png',
						city:'沈阳'
					},
					{
						name:'闸口迎宾表演',
						tip:'一场萌熊互动',
						des:'冰峪旅游度假区被誉为“辽南桂林”冰（简单介绍）...庄河市北40余...',
						prize:168,
						img:'/static/banner.png',
						city:'沈阳'
					},
					{
						name:'话剧表演',
						tip:'戏曲',
						des:'鞍山玉佛苑是国家首批4A级旅游景区（简单介绍）... ',
						prize:199,
						img:'/static/banner.png',
						city:'沈阳'
					},
					{
						name:'上海世博会',
						tip:'与明星互动',
						des:'世界文化遗产五女山位于桓仁满族自治（简单介绍）...',
						prize:199,
						img:'/static/banner.png',
						city:'上海'
					},
					
				]
			}
		},
		methods: {
			getStatusTop(){
				if(this.statusBarHeight < 20+'px'){
					this.statusBarHeight = 20 +'px'
				}
			},
		},
		created(){
			
		},
		mounted() {
			this.getStatusTop();
		},
	}
</script>

<style scoped>
	.uni-status-bar {
		display: block;
		width: 100%;
		height: var(--status-bar-height);
		/* border:1upx solid blue */
	}
	.head{
		width: 750upx;
		/* height: 124upx; */
		position: fixed;
		z-index: 2;
		height: auto;
		background: #FFFFFF;
	}
	.head-img{
		width: 79upx;
		height: 80upx;
		/* margin-top: 44upx; */
		float: left;
	}
	.head image{
		width: 36upx;
		margin-left: 29upx;
		margin-top:20upx;
		height: 36upx;
	}
	.head text{
		float: left;
		font-size: 30upx;
		font-weight: bold;
		line-height: 60upx;
		margin-top: 8upx;
	}
	.place-tip{
		width: auto;
		position: absolute;
		height: auto;
		left:14upx;
		display: flex;
		top: 420upx;
		flex-direction:row;
		margin-right: 2%;
		padding-right: 20upx;
		border-radius: 10px 4px 10px 0;
		background: rgba(0,0,0,0.6);
	}
	.place-tip text{
		padding: 1vw 0px 1vw 10px;
		color: #FFFFFF;
		display:table;
		float: right;
		width: auto;
		line-height: 5vw;
		font-size: 3vw;
	}
	
	.dot{
		width: 8upx;
		height: 8upx;
		float: left;
		display: block;
		margin: auto 0px auto 14upx;
		background: #FFFFFF;
		border-radius: 50%;
	}
	.like-list{
		width: 100%;
		height: auto;
		padding-top: 140upx;
		margin-bottom: 110upx;
		display: table;
	}
	.like-area{
		width: 93.4%;
		margin-left: auto;
		margin-right: auto;
		display: table;
	}
	
	.like-item:nth-child(odd){
		margin-top: 20upx;
		width: 340upx;
		float: left;
	}
	.like-item:nth-child(even){
		margin-top: 20upx;
		width: 340upx;
		float: right;
	}
	
	.like-item:nth-child(1),.like-item:last-child{
		height: 652upx;
	}
	.like-item:nth-child(1) image,.like-item:last-child image{
		border-radius: 10px 10px 0 0;
		width: 340upx;
		height: 430upx; 
	}
	.like-item:nth-child(1) .place-tip,.like-item:last-child .place-tip{
		top: 370upx;
	}
	
	.like-item{
		height: 700upx;
		position: relative;
	}
	.like-item image{
		border-radius: 10px 10px 0 0;
		width: 340upx;
		height: 479upx;
	}
	.like-name{
		width: 293upx;
		margin-left: auto;
		margin-right: auto;
		font-size: 27upx;
		font-weight: bold;
		display: block;
	}
	.like-name font{
		font-weight: 100;
	}
	.like-tip{
		width: 293upx;
		margin-left: auto;
		margin-right: auto;
		color: #048CFF;
		font-size: 25upx;
		display: block;
	}
	.like-des{
		width: 293upx;
		font-size: 27upx;
		margin-left: auto;
		margin-right: auto;
		color: #999999;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
	.like-prize{
		width: 293upx;
		display: block;
		margin-left: auto;
		margin-right: auto;
		margin-top: 10upx;
		text-align: right;
		font-size: 30upx;
		color:#DD540A;
	}
</style>
